<template>
  <el-dialog title="文件详情" :visible.sync="dialogVisible" width="600px">
    <div>
      <el-descriptions class="margin-top" :column="1" size="medium" border>
        <el-descriptions-item>
          <template slot="label">
            <span style="word-break: keep-all"> 文件名称</span>
          </template>
          {{ file.oldName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 文件类型 </template>
          {{ file | fileTypeFilter }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 文件大小 </template>
          {{ file.attrSize | fileSizeFilter }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 资源权限 </template>
          {{ file.isPublic == 1 ? '共享' : '私有' }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 下载权限 </template>
          {{ file.isDownload == 1 ? '可以下载' : '不可下载' }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 创建人 </template>
          {{ file.createName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 创建时间 </template>
          {{ file.createTime }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      file: {},
    }
  },
  mounted() {
    this.$bus.$on('detailFile', (v) => {
      this.file = v
      this.dialogVisible = true
    })
  },
  beforeDestroy() {
    this.$bus.$off('detailFile')
  },
  filters: {
    fileTypeFilter(data) {
      let { isFolder, showType } = data
      if (isFolder == 1) return '文件夹'
      switch (showType) {
        case '1':
          return '图片'
        case '2':
          return '音频'
        case '3':
          return '视频'
        case '4':
          return '文档'
        case '5':
          return '压缩文件'
        case '6':
          return '其他'
        default:
          return showType
      }
    },
  },
}
</script>